<template>
  <div class="member">
      <!--一部分-->
      <div class="memtit">
          <div class="memle"><span class="iconfont icon-iconfontjiantouzuo"></span></div>
          <div class="memri"><span>会员权益</span></div>
      </div>

      <!--头像部分-->
      <div class="head">
          <div class="headcon">
              <div class="conle"><img src="../../assets/b3d30da494103093269684c75b8544d5.png"/></div>
              <div class="conri">
                  <div class="ria">喵喵会员:<span>白银1</span></div>
                  <div class="rib">
                      <mt-progress :value="0" :bar-height="8"></mt-progress>
                      <p>总消费0.0元，当前享受{{memcon}}折</p>
                  </div>
              </div>
          </div>

      </div>

      <!--列表部分-->
      <div class="memlist">
          <ul>
              <li>
                  <div style="background: pink">
                      <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-huiyuan"></use>
                      </svg>
                  </div>
                  <span>会员折上折</span>
                  <p>最终结算可以享受会员折扣</p>

              </li>
              <li>
                  <div  style="background:sandybrown">
                      <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-liwu"></use>
                      </svg>
                  </div>
                  <span>新人好礼</span>
                  <p>新人首登免费领取优惠券</p>

              </li>
              <li>
                  <div  style="background: orange">
                      <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-A"></use>
                      </svg>
                  </div>
                  <span>积分相送</span>
                  <p>每月17日会员日享受双倍积分</p>

              </li>

              <li>
                  <div  style="background:darksalmon">
                      <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-mianfei"></use>
                      </svg>
                  </div>
                  <span>免费试吃</span>
                  <p>参与每日抢购，好礼相送</p>

              </li>
              <li>
                  <div  style="background:palegreen">
                      <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-icon-test"></use>
                      </svg>
                  </div>
                  <span>生日礼</span>
                  <p>生日当天下单购买5倍积分</p>

              </li>
              <li>
                  <div  style="background:violet">
                      <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-huangou"></use>
                      </svg>
                  </div>
                  <span>积分换购</span>
                  <p>积分商城更多好礼兑换</p>

              </li>
          </ul>
      </div>

  </div>
</template>

<script>
    export default{
        name: 'app.vue',
       data(){
            return{
                memcon:[],
                date:'2020-03-26T11:55:50.000+0000'
            }
       },
        methods:{
            cc(){

            }
        },
        created(){
                this.axios({
                    method:'get',
                    url:'http://115.28.137.176:8098/coupon/discountSelect?id=1',
                    data:{

                    }
                }).then((res)=>{
                    this.memcon=res.data.data;
                    console.log(this.memcon)
                }).catch(()=>{

                })
            }

    }




</script>


<style lang="less">
    @baseFontSize:20px;
    @baseSize:20;
    @beijing:#ffffff;
    @ziti:#242424;
    @ziti2:#232323;
    html{
        font-size: @baseFontSize;
    }

    *{
        margin:0;
        padding: 0;
        list-style: none;
    }
    a{
        text-decoration:none
    }
    .px2rem(@name,@px){
            @{name}:@px / @baseSize /2 * 1rem;
    }
    /*/2  /3 是根据设计师给你的是几倍图来定的*/

.member{
    .px2rem(width,750);
    background:@beijing;
    position: absolute;
    .memtit{
        .px2rem(width,750);
        .px2rem(height,43);
        .px2rem(font-size,35);
        .px2rem(margin-top,20);
        display: flex;
        .memle{
            .px2rem(margin-left,30)
        }
        .memri{
            .px2rem(margin-left,240)
        }
    }
    .head{
        .px2rem(width,750);
        .px2rem(height,205);
       display: flex;
        background: orange;
        .headcon{
            .px2rem(width,585);
            .px2rem(height,100);
            .px2rem(margin-top,55);
            .px2rem(margin-left,40);
            display: flex;

            .conle{
                .px2rem(width,100);
                .px2rem(height,100);
                background:pink;
                overflow: hidden;
                border-radius: 50%;
            }
            .conri{
                color: @beijing;
                .px2rem(width,459);
                .px2rem(height,100);
                .px2rem(font-size,35);

                .ria{
                    .px2rem(margin-left,30);
                    span{
                        background: #222222;
                        .px2rem(margin-left,30);
                        .px2rem(font-size,28);
                    }
                }
                .rib{
                    .px2rem(width,445);
                    .px2rem(height,50);
                    .px2rem(margin-left,30);
                    p{
                        .px2rem(font-size,15);
                        .px2rem(margin-top,-10);
                    }
                }
            }
        }

    }
    .memlist{
        .px2rem(width,750);
        background: #f5f5f5;
        ul{
            .px2rem(width,750);
            .px2rem(height,605);
            .px2rem(margin-top,20);
            background: #f5f5f5;
            li{
                .px2rem(width,210);
                .px2rem(height,210);
                .px2rem(margin-top,60);
                .px2rem(margin-left,28);
                text-align: center;
                background: @beijing;
                float: left;
                div{
                    .px2rem(width,70);
                    .px2rem(height,60);
                    border-radius: 50%;
                    .px2rem(margin-left,70);
                }
                span{
                    .px2rem(font-size,30);
                    font-weight: bold;
                }
                p{
                    .px2rem(font-size,20);

                }
            }
        }
    }

}
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }


</style>
